<template>
  <div class="page-container">
    <a-tabs
      v-if="enterpriseDetail"
      :active-key="activeKey"
      default-active-key="rent"
      :header-padding="false"
      @change="changeTabFn"
      @tab-click="tabsClickFn"
    >
      <template #extra>
        <a-button v-permission="'svms:value-added:contract:settings.edit'" v-if="isShowEditBtn" type="primary" @click.stop="editFn">
          编辑
        </a-button>
      </template>
      <a-tab-pane key="valueAddedService" title="付费版合同服务配置">
        <value-added-service ref="valueAddedServiceRef" :enterpriseDetail="enterpriseDetail" :status="status" @updateData="updateDataFn" />
      </a-tab-pane>
      <a-tab-pane key="operate" title="操作记录">
        <OperateLog :id="''" type="42" v-if="activeKey == 'operate'" />
      </a-tab-pane>
    </a-tabs>
  </div>
  <page-form-footer
    cancelText="返回"
    :cancelFn="cancelFn"
    :ok-loading="okLoading"
    @ok="submitFn"
    :confirmConfig="confirmConfig"
    v-if="status == 'edit'"
  />
</template>

<script setup name="ValueAddedContractSettings">
  import { ref, nextTick, provide, computed, onActivated } from 'vue'
  import valueAddedService from './components/value-added-service/index.vue'
  import { Message } from '@arco-design/web-vue'
  import { usePageDict } from '@/hooks/useDict'
  import bus from '@/utils/bus'
  // 读取商户配置开始
  import useUserStore from '@/store/modules/user'
  const userStore = useUserStore()

  const getDetailApi = (callback) => {
    userStore.setEpDetail((result) => {
      const { serviceTypes, wxNativePay } = result
      // 租赁配置下无可配置内容，此时隐藏 租赁配置 tab
      if (!serviceTypes && !wxNativePay) {
        activeKey.value = 'logo'
        beforeActiveKey = 'logo'
        showRentTab.value = false
      }
      enterpriseDetail.value = result
      callback && callback()
    })
  }

  // dict
  const enterpriseDict = usePageDict('enterpriseDict')
  provide('dict', enterpriseDict)
  // tabs active
  const activeKey = ref('valueAddedService')
  const rentRef = ref()
  const logoRef = ref()
  const basicInfoRef = ref()
  const valueAddedServiceRef = ref()
  // 暴露给子组件 dict 对象
  const status = ref('view')
  const editFn = () => {
    status.value = 'edit'
  }
  const cancelFn = () => {
    status.value = 'view'
  }
  // 记录点击的 history 用于在编辑态下 不允许切换到 其他tab
  let beforeActiveKey = 'rent'
  const changeTabFn = (key) => {
    activeKey.value = key
    if (status.value != 'edit') {
      beforeActiveKey = key
    }
  }
  const isShowEditBtn = computed(() => {
    if (status.value == 'view' && activeKey.value != 'operate') {
      if (activeKey.value == 'valueAddedService') {
        return (
          enterpriseDetail.value.config.econtractEnabled === 1 &&
          enterpriseDetail.value.config.authenticatinStatus === 1 &&
          enterpriseDetail.value.config.authorizationStatus === 1
        )
      }
      return true
    } else {
      return false
    }
  })
  const tabsClickFn = () => {
    if (status.value == 'edit') {
      nextTick(() => {
        activeKey.value = beforeActiveKey
        Message.warning('当前页面数据暂未保存，请确认后切换页面')
      })
    }
  }

  const confirmConfig = computed(() => {
    if (activeKey.value == 'rent') {
      return {
        content: '请确认是否提交新的配置？',
        cancelText: '再次核查',
      }
    } else {
      return null
    }
  })

  // 更新detail数据
  const updateDataFn = () => {
    getDetailApi(() => {
      bus.emit('enterpriseConfigChange')
    })
  }
  const okLoading = ref(false)
  const submitFn = (noticeSuccess) => {
    okLoading.value = true
    // 保存 logo 配置
    if (activeKey.value == 'logo') {
      logoRef.value
        .saveFn()
        .then(() => {
          status.value = 'view'
          noticeSuccess()
        })
        .finally(() => {
          okLoading.value = false
        })
    }
    // 保存 logo 配置
    if (activeKey.value == 'basicInfo') {
      basicInfoRef.value
        .saveFn()
        .then(() => {
          status.value = 'view'
          noticeSuccess()
        })
        .finally(() => {
          okLoading.value = false
        })
    }
    if (activeKey.value == 'rent') {
      rentRef.value
        .saveFn()
        .then(() => {
          status.value = 'view'
          noticeSuccess()
        })
        .finally(() => {
          okLoading.value = false
        })
    }
    if (activeKey.value == 'valueAddedService') {
      valueAddedServiceRef.value
        .saveFn()
        .then(() => {
          status.value = 'view'
          noticeSuccess()
          okLoading.value = false
        })
        .finally(() => {
          okLoading.value = false
        })
    }
  }
  // 企业信息
  const enterpriseDetail = ref(null)
  const showRentTab = ref(true)

  // 获取数据，keep-alive详情状态刷新数据
  onActivated(() => {
    if (status.value == 'view') {
      getDetailApi()
    }
  })
</script>

<style lang="less" scoped></style>
